<template>
	<view class="bag">
		<view class="bg-color"></view>
		<view class="car-box">
		  <checkbox-group >
		    <view class="row-data" v-for="item in dataList" :key="item.id">
		      <view class="row-btn">
		        <checkbox :value="item.id" :checked="checked" />
		      </view>
		      <view class="row-list"  :data-item="item">
		        <view class="row-img">
		          <image :src="item.img" mode="aspectFill" />
		        </view>
		        <view class="row-info">
		          <view class="row-text">{{item.content}}</view>
		          <view class="row-price">
		            <view>
		              <text class="row-icon">￥</text>
		              <text class="row-money">{{item.showPrice}}</text>
		            </view>
		            <view>
		              <text class="btn">x{{item.number}}</text>
		            </view>
		          </view>
		        </view>
		      </view>
		    </view>
		  </checkbox-group>
		</view>
		<!-- 结算 -->
		<view class="footer-box">
		  <view>
		    <checkbox-group >
		      <label class="level">
		        <checkbox value="all" :checked="checkAll" />全选
		      </label>
		    </checkbox-group>
		  </view>
		  <view class="level">
		    <view>
		      <text>合计：</text>
		      <text class="total-btn row-icon">￥</text>
		      <text class="total-btn row-money">{{totalMoney}}</text>
		    </view>
		    <view class="total-end" >结 算</view>
		  </view>
		</view>
	</view>
	 

</template>

<script setup lang="ts">
	let checked= false
	 let   checkAll=false
	  const  dataList= [{
	        id: '000',
	        img: 'https://img2.baidu.com/it/u=2681955314,221996905&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=300',
	        content: '努力学习，天天向上',
	        price: 3289,
	        showPrice: '32.89',
	        number: 1
	      },
	      {
	        id: '111',
	        img: 'https://img2.baidu.com/it/u=2681955314,221996905&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=300',
	        content: '努力学习，天天向上',
	        price: 2456,
	        showPrice: '24.56',
	        number: 2
	      }, {
	        id: '222',
	        img: 'https://img2.baidu.com/it/u=2681955314,221996905&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=300',
	        content: '努力学习，天天向上',
	        price: 3289,
	        showPrice: '89.89',
	        number: 5
	      },
	    ]
	   let totalMoney='0.00'
	   let selectDatas= []
	
</script>

<style>
.bag {
	 background-image: linear-gradient(to bottom, #d4d423, #a6d5fc, #e0f2fd);
	 height: 100vh;
  font-size: 32rpx;
  background-color: #f1f1f1;
}

.bg-color {
 
  height: 200rpx;
  width: 100%;
}

.car-box {
  min-height: 300rpx;
  border-radius: 20rpx;
  background-color: white;
  margin: -190rpx 20rpx 20rpx 20rpx;
  padding: 20rpx 10rpx;
}

.row-data {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20rpx;
}

.row-btn {
  width: 10%;
  text-align: center;
}

.row-list {
  width: 90%;
  display: flex;
  flex-direction: row;
}

.row-img {
  width: 30%;
  background-color: #f1f1f1;
}

.row-info {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20rpx;
}

.row-img image {
  width: 100%;
  height: 200rpx;
}

.row-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 30rpx;
}

.row-price {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.row-price view:first-child {
  color: #FA5422;
}

.row-icon {
  font-size: 26rpx;
}

.row-money {
  font-weight: bold;
}

.btn {
  padding: 5rpx 20rpx;
  font-size: 28rpx;
  color: gray;
}

checkbox {
  zoom: .8;
}

.footer-box {
  width: 95%;
  position: fixed;
  bottom: 105rpx;
  left: 0;
  z-index: 999;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  padding: 0 20rpx;
}

.level {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.total-btn {
  color: #FA5422;
}

.total-end {
  background-color: #008B8B;
  margin-left: 20rpx;
  padding: 15rpx 50rpx;
  border-radius: 50rpx;
  font-size: 30rpx;
  color: white;
}

</style>

